<template>
  <div>
    <!-- 1、面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2、卡片区域 -->
    <el-card>
        <!-- 在绘制图前， 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 700px; height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
// 导入数据图表依赖
import * as echarts from 'echarts';
// 用于对象合并
import _ from 'lodash';

export default {
    data(){
      return {
        // 数据报表的数据
         ReportsList:{},

        // 需要和ReportsList合并的基础数据
        option :{
            title: { text: '用户来源' },
            // 鼠标悬浮在图形报表上时，出现数据和提示框
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // 十字架样式
                    type: 'cross',
                    label: {  backgroundColor: '#666' }
                }
            },
            // 数据报表的位置
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                // 整个图形报表的大小是否包含x、y轴等外围的文字
                containLabel: true
            },

            xAxis: [
              {
                type: 'category',
                // x轴上的数据是一点还是一段==》边界
                boundaryGap: false
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            legend: {
              // Legend data should be same with series name or data name.
                data:[],
            },
            // 数组中的每一个对象，都是一条数据或者说一条折线
            series: [
               {
                  emphasis: {
                      // 当鼠标放在这个区域时，单独显示这一块区域
                      focus: 'series'
                  },
               }
            ],
          }
      }
    },
    methods:{
      //绘制图表
      async DrawEchart(){
          /*  前期准备工作：
            1、导入echarts依赖
            2、在绘制图前， 为 echarts 准备一个具备大小（宽高）的 DOM
            3、准备好图形报表数据
          */

          // 1.0 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));

          // 2.0 指定图表的配置项和数据
          // 获取图形报表数据
          const res = await this.$http.get('reports/type/1');
          // console.log('数据报表：',res.data.data);
          if(res.data.meta.status!=200)  return;
           this.ReportsList=res.data.data;

          // 将获取到的数据与option进行合并-->对象数据合并
          var result = _.merge(this.option,this.ReportsList);
          // 3.0 使用刚指定的配置项和数据显示图表。
          myChart.setOption(result);
      }
    },
    mounted(){
      // 要在所有的Dom渲染完之后，才执行
      this.DrawEchart();
    }
}
</script>

<style scoped>
  .el-card {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px skyblue;
    background-color: #fff;
  }
</style>